// html{font-size: 14px;}
/*
html{font-size:14px;}
*/

// 单值变量
// $c:green;
// .box{
//     background: $c;
// }
// p{
//     color: $c;
// }

// 多值变量
// $c: red green yellow;
// .box1{
//     color: nth($c,1);
// }
// .box2{
//     color: nth($c,2);
// }
// .box3{
//     color: nth($c,3);
// }

// list变量 - 类似于数组
// $arr:(1 50px 100px)(2 60px 110px)(3 70px 120px)(4 80px 130px);

// @each $i,$w,$h in $arr {
//     .box#{$i}{
//         width: $w;
//         height: $h;
//     }
// }

// map变量 - 类似于对象
// $obj:(h1:30px,h2:20px,h3:12px);
// @each $key,$val in $obj {
//     #{$key}{
//         font-size: $val;
//     }
// }


// 嵌套
// ul.list
//     li
//     li
//     li
//     li.active
// .list li{border: solid 1px black}
// .list .active{border:none}

// .list{
//     li{
//         border: solid 1px black;
//         &:hover{color: red}
//     }
//     .active{
//         border:none
//     }
//     // li:hover{
//     //     color: red
//     // }
// }

// .box{
//     border:{
//         left:solid 1px black;
//         right:{
//             width:20px;
//             color: yellow;
//             style: solid;
//         }
//     }
// }


// 混合（代码块）
// @mixin move ($n){
//     -webkit-transform: $n;
//     -moz-transform: $n;
//     -ms-transform: $n;
//     -o-transform: $n;
//     transform: $n;
// }

// .box1{
//     @include move(translate(90px));
// }

// .box2{
//     @include move(rotate(90deg));
// }

// 变量
// $fz:16px;

// html{
//     font-size: $fz;
// }

// // 函数
// @function pTr($px){
//     @return $px / $fz * 1rem;
// }


// // 运算
// .box{
//     width: pTr(37px);
//     height: pTr(78px);
// }
// .box1{
//     width: pTr(237px);
// }


// 继承
// .box1{
//     width: 100px;height: 100px;
//     background: red;
// }
// .box2{
//     @extend .box1;
//     background: yellow
// }

// 导入外部scss文件
// @import "./css.scss";